<div class="ant-notification-notice ant-notification-notice-closable"
  [ngStyle]="nzMessage.options?.nzStyle"
  [ngClass]="nzMessage.options?.nzClass"
  [@notificationMotion]="state"
  (mouseenter)="onEnter()"
  (mouseleave)="onLeave()">
  <div *ngIf="!nzMessage.template" class="ant-notification-notice-content">
    <div class="ant-notification-notice-content" [ngClass]="{ 'ant-notification-notice-with-icon': nzMessage.type !== 'blank' }">
      <div [class.ant-notification-notice-with-icon]="nzMessage.type !== 'blank'">
        <ng-container [ngSwitch]="nzMessage.type">
          <i *ngSwitchCase="'success'" nz-icon nzType="check-circle" class="ant-notification-notice-icon ant-notification-notice-icon-success"></i>
          <i *ngSwitchCase="'info'" nz-icon nzType="info-circle" class="ant-notification-notice-icon ant-notification-notice-icon-info"></i>
          <i *ngSwitchCase="'warning'" nz-icon nzType="exclamation-circle" class="ant-notification-notice-icon ant-notification-notice-icon-warning"></i>
          <i *ngSwitchCase="'error'" nz-icon nzType="close-circle" class="ant-notification-notice-icon ant-notification-notice-icon-error"></i>
        </ng-container>
        <div class="ant-notification-notice-message" [innerHTML]="nzMessage.title"></div>
        <div class="ant-notification-notice-description" [innerHTML]="nzMessage.content"></div>
      </div>
    </div>
  </div>
  <ng-template
    [ngIf]="nzMessage.template"
    [ngTemplateOutlet]="nzMessage.template"
    [ngTemplateOutletContext]="{ $implicit: this, data: nzMessage.options?.nzData }">
  </ng-template>
  <a tabindex="0" class="ant-notification-notice-close" (click)="close()">
    <span class="ant-notification-notice-close-x">
      <i nz-icon nzType="close" class="ant-notification-close-icon"></i>
    </span>
  </a>
</div>
